<template>
    <el-container>
        <el-header>
            <h1>{{ route.params.id }}</h1>
        </el-header>
        <el-main>
            <el-tabs 
                v-model="activeName" 
                class="demo-tabs" 
                @tab-click="handleClick"
                type="card"
                stretch
            >
                <el-tab-pane label="QC reports" name="QC_reports">
                    <Reports :fileList="route.params.id"/>
                </el-tab-pane>
                <el-tab-pane label="QC motifs" name="QC_motifs">Config</el-tab-pane>
                <el-tab-pane label="Get top putative targets" name="putative_targets">Role</el-tab-pane>
                <!-- <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
            </el-tabs>
        </el-main>
        <el-footer></el-footer>
    </el-container>
</template>

<script lang="ts" setup name="Qc">
    import { useRoute } from 'vue-router';
    import { onBeforeMount, ref, reactive } from 'vue'
    import Reports from './reports/Reports.vue'

    
    const route = useRoute()
    const tableData = ref({})
    
    let activeName = ref('QC_reports')

    function handleClick(val:any) {
        console.log(val)
    }
</script>

<style scoped>
    .demo-tabs {
        width: 100%;
        /* margin: 20px 5% */
    }
</style>